<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文件下载</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <style type="text/css">
    </style>
</head>

<body role="document" youdao="bind">
<div class="container theme-showcase" role="main">
    <br>
    </P>
    <div class="row">
        <div class="col-md-6">
            <table class="table table-striped" id="datas">
                <thead>
                <tr>
                    <th>#</th>
                    <th>图片</th>
                    <th>名称</th>
                    <th>大小(KB)</th>
                    <th>选择</th>
                    <th>下载</th>
                </tr>
                </thead>
                <tbody>
                <tr id="mytemplate">
                    <td id="NO"></td>
                    <td id="Image"></td>
                    <td id="Name"></td>
                    <td id="Size"></td>
                    <td id="Operation"></td>
                    <td id="Down"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <button type="button" class="btn btn-danger" onclick="DelFile()">删除选中的文件</button>
</div>

<!-- /container -->
<script src="static/js/jquery-2.1.3.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script>
    $(function () {
        ListFile();
    });
    function DelFile() {
        var filename = new Array();
        $(".mycheckbox").each(function () {
            if ($(this).is(':checked')) {
                filename.push($(this).parent().prev().prev().text());
            }
        });
        if (filename.length < 1) return;   //没有选择时退出
        var o = new Object();
        o.filename = filename;
        $.ajax({
            type: 'DELETE',
            url: "/file",
            data: JSON.stringify(o),
            contentType: 'application/json',
            success: function (msg) {
                ListFile();
            },
            error: function () {
                alert("删除文件出错");
            }
        });
    }

    function ListFile() {
        $(".myrow").remove();
        $.ajax({
            type: "GET",//使用get方法访问后台
            dataType: "json",//返回json格式的数据
            url: "/list",//要访问的后台地址
            cache: false,
            success: function (msg) {//msg为返回的数据，在这里做数据绑定
                // console.log(msg);
                $("#mytemplate").show();
                $.each(msg, function (i, n) {
                    var row = $("#mytemplate").clone();
                    row.addClass("myrow");
                    row.find("#NO").text(i);
                    var img="<img height='100px' width='100px' src='./files/"+n.name+"' >";
                    row.find("#Image").html(img);
                    row.find("#Name").html("<a href=" + n.name + "'/files'>" + n.name + "</a>");
                    row.find("#Size").text(n.size);
                    row.find("#Operation").html("<input class='mycheckbox'type='checkbox' value='" + i + "'>");
                    row.find("#Down").html("<a href=\"./files/"+n.name+"\" download=\""+n.name+"\">下载</a>");
                    row.appendTo("#datas");//添加到模板的容器中
                });
                $("#mytemplate").hide();   //隐藏模板
            },
            error: function () {
                alert("连接服务器错误");
            }
        });
    }
</script>
</body>

</html>